import React from 'react'
import Mytab from './Mytab'
import Area from './Area'
import { connect } from 'react-redux'
import { Modal, Table, Popconfirm, Divider, Button, Cascader } from 'antd';
import EditForm from './EditForm'
import { getConfigController, getEducationInfo } from './actionCreators'
import './css/infomation.css'
import pcqdata from './pcqdata';
import { ListView } from 'antd-mobile';
import ScrollArea from 'react-scrollbar';
import scrollIntoView from 'scroll-into-view-if-needed';
class Information extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            projects: [],
            grades: [],
            infoArea: '',
            infoState: '',
            pageNo: 1
        }
        this.checkboxGrades = this.checkboxGrades.bind(this)
        this.checkboxProjects = this.checkboxProjects.bind(this)
    }
    componentDidMount() {
        console.log(this.state.pageNo);
        this.props.dispatch(getEducationInfo(this.state.pageNo));
        this.props.dispatch(getConfigController());
    }
    checkboxGrades(e) {
        let item = e.target.value;
        let items = this.state.grades.slice();
        let index = items.indexOf(item);
        index === -1 ? items.push(item) : items.splice(index, 1);
        this.setState({ grades: items });
    }
    checkboxProjects(e) {
        let item = e.target.value;
        let items = this.state.projects.slice();
        let index = items.indexOf(item);
        index === -1 ? items.push(item) : items.splice(index, 1);
        this.setState({ projects: items });
    }
    change = (type, e) => {
        this.setState({
            [type]: e.target.value
        })
    }
    changeArea = (type, value) => {
        this.setState({
            [type]: value
        })
    }
    onStore = () => {
        this.props.dispatch({
            type: 'SELECTSTORE',
            value: this.state
        })
    }
    nextPage = () => {
        if (this.state.pageNo < this.props.pageTotalCount) {
            this.setState({ pageNo: ++this.state.pageNo })
            console.log(this.state.pageNo);
            this.props.dispatch(getEducationInfo(this.state.pageNo));
        }
    }
    upPage = () => {
        if (this.state.pageNo != 1) {
            this.setState({ pageNo: --this.state.pageNo })
            console.log(this.state.pageNo);
            this.props.dispatch(getEducationInfo(this.state.pageNo));
        }
    }
    handleSelect = () => {
        //点击按钮显示模态框
        this.setState({ visible: true, });
    }
    handleCancel = () => {
        // 清理表单数据
        //隐藏模态框
        this.setState({ visible: false });
    }
    handleUpdate = (record) => {
        //修改时，赋值表单数据
        let Editinfo = {
            username: record.username,
            code: record.code,
            remark: record.remark,
        }
        this.setState({ visible: false, Editinfo });
    }
    render() {
        console.log(this.state);
        return (
            <div className='all'>
                <div className='filter'>
                    <div className='filter-position'>
                        <div>位置：{this.state.infoArea.toString()}</div>
                    </div>
                    <div className='filter-grade'>
                        年级：{this.state.grades.toString()}
                    </div>
                    <div className='filter-subject'>
                        <div className=''>科目：{this.state.projects.toString()}</div>
                    </div>
                    <div className='filter-state'>
                        信息状态：{this.state.infoState.toString()}
                    </div>
                    <div className='selfilter'>
                        <div className='filtrate' onClick={this.handleSelect}>筛选</div>
                    </div>

                </div>
                <Modal okText='保存' cancelText='取消'
                    visible={this.state.visible}
                    onOk={this.handleUpdate} onCancel={this.handleCancel}
                >
                    <div>
                        <div className='form-position'>
                            位置：
                            <Cascader
                                bordered={false}
                                options={pcqdata}
                                onChange={(e) => this.changeArea("infoArea", e)}
                                placeholder="请选择位置"
                                className='Area-area'
                            />
                        </div>
                        <div className='filter-grade'>
                            年级：
                            <div><input name="grade" type="checkbox" value="primary" onChange={this.checkboxGrades} />小学</div>
                            <div><input name="grade" type="checkbox" value="junior" onChange={this.checkboxGrades} />初中</div>
                            <div><input name="grade" type="checkbox" value="senior" onChange={this.checkboxGrades} />高中</div>
                        </div>
                        <div className='filter-subject'>
                            <div className='form-subject'>科目：</div>
                            <div className='form-subject-list'>
                                {
                                    this.props.subject.map((item) => (
                                        <div>
                                            <input
                                                name="subject"
                                                type="checkbox"
                                                onChange={this.checkboxProjects}
                                                value={item.id}
                                            />
                                            {item.configName}
                                        </div>
                                    ))
                                }
                            </div>
                        </div>
                        <div className='filter-state'>
                            信息状态：
                            <input name="state" type="radio" value="all" onChange={(e) => this.change("infoState", e)} />全部显示
                            <input name="state" type="radio" value="onlycan" onChange={(e) => this.change("infoState", e)} />只显示可接单
                        </div>
                    </div>
                </Modal>
                <div
                    className='information_infos'
                >
                    {
                        this.props.dataInfo.map((info) => (
                            <div className='info'
                                key={info.id}
                                onClick={() => this.props.history.push({
                                    pathname: '/infodetail',
                                    educationinfo: info
                                })}
                            >
                                {
                                    info.state == 1
                                        ? <div className='appointment'>已预约</div>
                                        : <div className='appointment'>可预约</div>
                                }
                                <div className='order-number'>订单编号：{info.id}</div>
                                <div className='city'>城市：{info.city}</div>
                                <div className='sex'>性别：{info.sex}</div>
                                <div className='area'>区域：{info.area}</div>
                                <div className='grade'>年级：{info.grade}</div>
                                <div className='subject'>科目：{info.teacherSubject}</div>
                                <div className='remarke'>发单用户昵称：{info.remarke}</div>
                                <div className='good'>好评率：80%</div>
                            </div>
                        ))
                    }
                    <div className='pageno'>
                        <div
                            className='info-up'
                            onClick={this.upPage}
                        >上一页</div>
                        <span>{this.state.pageNo}/{this.props.pageTotalCount}</span>
                        <div
                            className='info-down'
                            onClick={this.nextPage}
                        >下一页</div>
                    </div>
                </div>
                <Mytab />
                <div className='bottom'></div>
            </div>
        )
    }

}

const mapStateToProps = (state) => ({
    dataInfo: state.dataInfo,
    pageTotalCount: state.pageTotalCount,
    subject: state.subject
})

export default connect(mapStateToProps)(Information)
